<ion-content no-bounce class="login-container bg-noon" [ngClass]="{'bg-morning': timeNow == 'morning', 'bg-noon': timeNow == 'noon', 'bg-night': timeNow == 'night'}">
    <div>
        <div class="logo-efos" [ngClass]="{'logo-efos-keyboard-hide': keyboardStatus == 'hide', 'logo-efos-keyboard-show': keyboardStatus == 'show'}">
            <img src="./assets/imgs/login/logo.png" />
        </div>

        <form #form="ngForm" (ngSubmit)="form.form.valid && doLogin()" novalidate class="form-horizontal efos-userform" role="form">
            <ion-list *ngIf="!phoneLogin">
                <ion-item>
                    <ion-label color="primary">
                        <img src='./assets/imgs/login/username.svg' style="width:18px" />
                    </ion-label>
                    <ion-input required placeholder="请输入账号" [ngClass]="{'is-success': form.submitted && !userName.valid }" name="username" [(ngModel)]="user.username" #userName="ngModel" type="text" (keydown)='onKeyPressed($event)'></ion-input>

                </ion-item>
                <div *ngIf="form.submitted && !userName.valid" class="text-danger">
                    请输入用户名!
                </div>
                <ion-item>
                    <ion-label color="primary">
                        <img src='./assets/imgs/login/password.svg' style="width:18px" />
                    </ion-label>
                    <ion-input [ngClass]="{ 'is-success': form.submitted && !password.valid }" required [(ngModel)]="user.password" name="password" #password="ngModel" type="password" placeholder="请输入密码" (keydown)='onKeyPressed($event)'></ion-input>
                </ion-item>
                <div *ngIf="form.submitted && !password.valid" class="text-danger">
                    请输入密码!
                </div>
            </ion-list>
            <!-- 登录方式切换，暂时屏蔽 -->
            <ion-list *ngIf="phoneLogin" style="position:relative">
                <ion-item>
                    <ion-label color="primary">
                        <img src='./assets/imgs/login/phone.svg' style="width:18px" />
                    </ion-label>
                    <ion-input required placeholder="请输入手机号" [ngClass]="{'is-success': form.submitted && !cellphone.valid }" name="cellphone" [(ngModel)]="sms.cellphone" #cellphone="ngModel" type="text" required></ion-input>
                </ion-item>
                <div *ngIf="form.submitted && !cellphone.valid" class="text-danger">
                    请输入正确的手机号!
                </div>
                <ion-item>
                    <ion-label color="primary">
                        <img src='./assets/imgs/login/verifycode.svg' style="width:18px" />
                    </ion-label>
                    <ion-input [ngClass]="{ 'is-success': form.submitted && !smscode.valid }" required minlength="4" [(ngModel)]="sms.smscode" name="smscode" #smscode="ngModel" placeholder="请输入验证码"></ion-input>
                    <p (click)="getSMSCode()" class="verify-code-text">{{ getSMSCodeText }}</p>
                </ion-item>
                <div *ngIf="form.submitted && !smscode.valid" class="text-danger">
                    请输入正确的验证码!
                </div>
            </ion-list>

            <!-- error response from server -->
            <div *ngIf="error" class="text-danger">{{ error }} <i *ngIf="showError" style="font-style: normal;color:#fff;margin-left: 10px;" (click)="initPassward()">去修改 >></i> </div>
            <div class="login-button-area">
                <button type="submit">登录</button>
            </div>
            <!-- 登录方式切换，暂时屏蔽 -->
            <div class="phone-Login-text" (click)="switchLoginWay()">
                <p *ngIf="phoneLogin">账号密码登录</p>
                <p *ngIf="!phoneLogin">手机验证码登录</p>
            </div>
        </form>

        <div class="login-footer">
            <p>{{ companyName }}
                <a href="{{ 'http://' + companyUrl }}">{{ companyUrl }}</a>
            </p>
        </div>
    </div>
</ion-content>